<template>
  <el-dialog title="分配角色" v-model="props.visible" :before-close="beforeClose">
    <el-form :model="ownForm" label-width="100px">
      <el-form-item label="账号">
        <el-input v-model="ownForm.username"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="ownForm.nickName"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="ownForm.password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="ownForm.email"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="ownForm.note"></el-input>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-radio-group v-model="ownForm.status">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {
  defineProps,
  watch,
  ref,
  reactive,
  withDefaults,
  defineEmits,
} from "vue";
import type { Ref } from "vue";
import type { IAdminListItem } from "../request/QmsAdminConreiller/index";

let props = withDefaults(
  defineProps<{
    visible: boolean;
    form: IAdminListItem;
  }>(),
  {
    visible: true,
  }
);

let originForm = ref({}) as Ref<IAdminListItem>; // 相当于一个空的备份
let ownForm = ref({}) as Ref<IAdminListItem>;

// console.log(props.visible);
// console.log(props.form);

watch(
  () => props.form,
  (newVal) => {
    // console.log(newVal);
    ownForm.value = { ...newVal };
    originForm.value = { ...newVal };
  }
);

// 自定义事件
let emits = defineEmits<{
  (event: "cancel"): void;
  (event: "confirm", row: IAdminListItem): void;
}>();

let beforeClose = (done: any) => {
  // console.log("beforeClose");
  // console.log(done);
  // done()  // 一般我们不执行done 函数，应该由父级去监听自定义事件 然后关闭
  emits("cancel");
};

// 取消
let onCancel = () => {
  // 清空 实际上是点击取消的时候 ，将 ownForm 恢复成备份的值
  ownForm.value = { ...originForm.value };
  emits("cancel");
};

// 确定
let onConfirm = () => {
  // console.log(ownForm.value);
  // 将参数返回给父级 ，让父级发请求完成功能
  emits("confirm", ownForm.value);
};
</script>

<style scoped></style>
